@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavsDemo

<abp-component-demo-section title="Base nav" view-path="@NavsDemoViewComponent.ViewPath">
    <abp-nav nav-style="Pill" align="Center">
        <abp-nav-item>
            <a abp-nav-link active="true" href="#">Active</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">Longer nav link</a>
        </abp-nav-item>
        <abp-nav-item class="dropdown">
            <abp-dropdown>
                <abp-dropdown-button class="text-primary" text="Dropdown button" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">link</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link disabled="true" href="#">disabled</a>
        </abp-nav-item>
    </abp-nav>
</abp-component-demo-section>

<abp-component-demo-section title="Alignment" view-path="@NavsDemoViewComponent.ViewPath">
    <abp-nav nav-style="Pill" align="Start">
        <abp-nav-item>
            <a abp-nav-link active="true" href="#">Active</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">Longer nav link</a>
        </abp-nav-item>
        <abp-nav-item class="dropdown">
            <abp-dropdown>
                <abp-dropdown-button class="text-primary" text="Dropdown button" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">link</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link disabled="true" href="#">disabled</a>
        </abp-nav-item>
    </abp-nav>
    <abp-nav nav-style="Pill" align="Center">
        <abp-nav-item>
            <a abp-nav-link active="true" href="#">Active</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">Longer nav link</a>
        </abp-nav-item>
        <abp-nav-item class="dropdown">
            <abp-dropdown>
                <abp-dropdown-button class="text-primary" text="Dropdown button" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">link</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link disabled="true" href="#">disabled</a>
        </abp-nav-item>
    </abp-nav>
    <abp-nav nav-style="Pill" align="End">
        <abp-nav-item>
            <a abp-nav-link active="true" href="#">Active</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">Longer nav link</a>
        </abp-nav-item>
        <abp-nav-item class="dropdown">
            <abp-dropdown>
                <abp-dropdown-button class="text-primary" text="Dropdown button" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">link</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link disabled="true" href="#">disabled</a>
        </abp-nav-item>
    </abp-nav>
</abp-component-demo-section>

<abp-component-demo-section title="Vertical" view-path="@NavsDemoViewComponent.ViewPath">
    <abp-nav nav-style="PillVertical" align="Start">
        <abp-nav-item>
            <a abp-nav-link active="true" href="#">Active</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">Longer nav link</a>
        </abp-nav-item>
        <abp-nav-item class="dropdown">
            <abp-dropdown>
                <abp-dropdown-button class="text-primary" text="Dropdown button" />
                <abp-dropdown-menu>
                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                </abp-dropdown-menu>
            </abp-dropdown>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link href="#">link</a>
        </abp-nav-item>
        <abp-nav-item>
            <a abp-nav-link disabled="true" href="#">disabled</a>
        </abp-nav-item>
    </abp-nav>
</abp-component-demo-section>